<script setup>
import { Fold, SwitchButton, ArrowDown, Expand } from "@element-plus/icons-vue";
import TagComponent from "@/components/tagComponent.vue";
import { useSidebarStore } from '@/store'
import { useRouter } from 'vue-router'


const router = useRouter()                // 路由
const sidebarStore = useSidebarStore()    // 侧边栏状态

// 退出登录
const handleCommand = async (command) => {
  if (command === 'logout') {
    // 退出操作
    await ElMessageBox.confirm('你确认要退出码？', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
  
    router.push('/login')
  }
}
</script>

<template>
  <div class="header-container">
    <div class="header-left flex-box">
      <el-icon v-if="sidebarStore.isCollapse" @click="sidebarStore.toggleCollapse()" class="icon" size="20">
        <Expand />
      </el-icon>
      <el-icon v-else @click="sidebarStore.toggleCollapse()" class="icon" size="20">
        <Fold />
      </el-icon>
      <div class="tagComponents">
        <TagComponent />
      </div>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleCommand">
        <span class="flex-box">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <p class="user-name">admin</p>
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  align-items: center;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background-color: #fff;
  padding-left: 10px;

  .header-left {
    height: 100%;

    .icon {
      cursor: pointer;
      width: 45px;
      height: 100%;
    }

    .icon:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
  }

  .header-right {
    padding-right: 50px;

    .user-name {
      margin-left: 10px;
    }
  }
}
</style>
